<template>
	<tm-fullView>
		<template v-slot:default="{ info }">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''" :style="{ minHeight: info.height + 'px' }">
				<tm-menubars title="级联拉选择器" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">单列基本示例,当前选中:{{ JSON.stringify(selected) }}</view>
					<tm-pickers @confirm="test" :default-value="selected" :list="['苹果', '香蕉', '可口可乐', '新西兰', '日本']"><tm-button>普通单列显示</tm-button></tm-pickers>
					<tm-pickers
						black
						@confirm="test"
						:default-value="selected"
						rang-key="title"
						:list="[{ title: '苹果' }, { title: '香蕉' }, { title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]"
					>
						<tm-button black>对象数据+暗黑</tm-button>
					</tm-pickers>
					<view class="text-size-s text-weight-b mb-24 ">多列示例,当前选中:{{ JSON.stringify(selected_1) }}</view>
					<tm-pickers :default-value="selected_1" @confirm="test_1" :list="list_1" rang-key="title" children-key="children" btn-color="bg-gradient-amber-lighten">
						<tm-button theme="bg-gradient-amber-lighten">显示多列</tm-button>
					</tm-pickers>
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">日期选择({{ JSON.stringify(t_1) }})</view>
					<view class="flex-start">
						<tm-pickersDate :default-value="t_1" @confirm="dateSe_1" btn-color="bg-gradient-deep-orange-accent">
							<tm-button size="m" theme="bg-gradient-deep-orange-accent">年月日</tm-button>
						</tm-pickersDate>
						<tm-pickersDate :default-value="t_2" :show-detail="{ year: true, month: false, day: false, hour: false, min: false, sec: false }" btn-color="bg-gradient-deep-orange-accent">
							<tm-button size="m" theme="bg-gradient-deep-orange-accent">年</tm-button>
						</tm-pickersDate>
						<tm-pickersDate :default-value="t_3" :show-detail="{ year: false, month: true, day: false, hour: false, min: false, sec: false }" btn-color="bg-gradient-deep-orange-accent">
							<tm-button size="m" theme="bg-gradient-deep-orange-accent">月</tm-button>
						</tm-pickersDate>
						<tm-pickersDate
							:show-detail="{ year: false, month: false, day: true, hour: false, min: false, sec: false }"
							:default-value="t_4"
							btn-color="bg-gradient-deep-orange-accent"
						>
							<tm-button size="m" theme="bg-gradient-deep-orange-accent">日</tm-button>
						</tm-pickersDate>
					</view>
					<view class="flex-start">
						<tm-pickersDate
							:show-detail="{ year: false, month: true, day: true, hour: false, min: false, sec: false }"
							:default-value="t_5"
							btn-color="bg-gradient-deep-orange-accent"
						>
							<tm-button theme="bg-gradient-deep-orange-accent">月日选择</tm-button>
						</tm-pickersDate>
						<tm-pickersDate
							:show-detail="{ year: false, month: true, day: true, hour: true, min: false, sec: false }"
							:default-value="t_6"
							btn-color="bg-gradient-deep-orange-accent"
						>
							<tm-button theme="bg-gradient-deep-orange-accent">月日时选择</tm-button>
						</tm-pickersDate>
					</view>
					<view class="flex-start">
						<tm-pickersDate start="2020-10-1" end="2022-2-20" :default-value="t_7" @confirm="dateSe_1" btn-color="bg-gradient-deep-orange-accent">
							<tm-button theme="bg-gradient-deep-orange-accent">年月日限制选择</tm-button>
						</tm-pickersDate>
						<tm-pickersDate
							:show-detail="{ year: true, month: true, day: true, hour: true, min: true, sec: true }"
							:mode="false"
							start="2020-10-1"
							end="2022-2-20"
							:default-value="t_8"
							btn-color="bg-gradient-deep-orange-accent"
						>
							<tm-button theme="bg-gradient-deep-orange-accent">年月日时分秒</tm-button>
						</tm-pickersDate>
					</view>

					<view class="text-size-s text-weight-b mb-24">也可以限制时分秒选择</view>
					<view class="flex-start">
						<tm-pickersDate
							start="2021-2-1 15:00:00"
							end="2021-2-1 19:00:00"
							:default-value="t_9"
							@confirm="dateSe_2"
							:show-detail="{ year: false, month: false, day: false, hour: true, min: true, sec: true }"
						>
							<tm-button theme="bg-gradient-blue-accent">时分秒选择</tm-button>
						</tm-pickersDate>
						<tm-pickersDate :modeValue="{year:'Y',day:'D',month:'M'}" start="2020-10-1" end="2022-2-20" :default-value="t_7" @confirm="dateSe_1" btn-color="bg-gradient-deep-orange-accent">
							<tm-button theme="bg-gradient-deep-orange-accent">英文后缀</tm-button>
						</tm-pickersDate>
					</view>
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">地区选择({{ JSON.stringify(d_3) }})</view>
					<tm-pickersCity @confirm="dateSe_3" :default-value="d_3" btn-color="bg-gradient-deep-purple-accent">
						<tm-button theme="bg-gradient-deep-purple-accent">地区选择</tm-button>
					</tm-pickersCity>
				</tm-sheet>

				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">单列嵌入基本示例,当前选中:{{ JSON.stringify(selected) }}</view>
					<tm-pickersView :default-value="selected" :list="['苹果', '香蕉', '可口可乐', '新西兰', '日本']"></tm-pickersView>
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">日期嵌入基本示例</view>
					<tm-pickersDateView></tm-pickersDateView>
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">地址嵌入基本示例</view>
					<tm-pickersCityView :default-value="['江西省', '南昌市', '青山湖区']"></tm-pickersCityView>
				</tm-sheet>
				<view style="height: 50upx;"></view>
			</view>
		</template>
	</tm-fullView>
</template>

<script>
import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
import tmPickersView from '@/tm-vuetify/components/tm-pickersView/tm-pickersView.vue';
import tmPickersDate from '@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue';
import tmPickersDateView from '@/tm-vuetify/components/tm-pickersDateView/tm-pickersDateView.vue';
import tmPickersCityView from '@/tm-vuetify/components/tm-pickersCityView/tm-pickersCityView.vue';
import tmPickersCity from '@/tm-vuetify/components/tm-pickersCity/tm-pickersCity.vue';
export default {
	components: { tmFullView, tmMenubars, tmSheet, tmButton, tmPickersView, tmPickersCityView, tmPickersCity, tmPickersDate, tmPickers, tmPickersDateView },
	data() {
		return {
			// 名称赋值默认(需要每个值的文本是唯一的不能同名)
			selected: ['可口可乐'],
			// 索引赋值默认选中状态
			selected_1: [1, 1],
			list_1: [
				{
					title: '水果产品',
					id: 1,
					children: [{ title: '苹果' }, { title: '香蕉' }, { title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
				},
				{
					title: '房间类型',
					id: 2,
					children: [{ title: '香蕉' }, { title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
				},
				{
					title: '批发市场',
					id: 3,
					children: [{ title: '可口可乐' }, { title: '新西兰' }, { title: '日本' }]
				}
			],

			t_1: '',
			t_2: '',
			t_3: '',
			t_4: '',
			t_5: '',
			t_6: '',
			t_7: '',
			t_8: '',
			t_9: '',
			
			d_3: []
		};
	},
	methods: {
		test(e) {
			let vt = [];
			e.forEach(item => {
				vt.push(item.index);
			});
			this.selected = vt;
		},
		test_1(e) {
			let vt = [];
			e.forEach(item => {
				vt.push(item.index);
			});
			this.selected_1 = vt;
		},
		dateSe_1(e) {
			// {year: 2021, month: 8, day: 23}
			this.t_1 = e.year + '-' + e.month + '-' + e.day;
		},
		dateSe_2(e) {
			// {hour: 12, min: 44, sec: 0}
			console.log(e);
		},
		dateSe_3(e) {
			console.log(e);
			// ["天津市", "市辖区", "和平区"]
			this.d_3 = e;
		}
	}
};
</script>

<style></style>
